<template>
  <div style="height: auto; width: 100%">
    <h3 style="text-align: center;margin-top: 0px">区域出租房价预测（目前仅限福州台江区）</h3>
    <el-form ref="form" :model="form">
      <el-form-item label="房子面积">
        <el-col :span="8">
          <el-input v-model="form.area"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button type="primary" @click="getForecastPrice">预测</el-button>
        </el-col>
        <el-col :span="8" :offset="1">
          <span  style="font-weight: 600">预测房价： {{form.price}} 元</span>
        </el-col>
      </el-form-item>
    </el-form>
    <div>
      <div>
        <p><span style="font-weight: 600">模型方程：</span>{{this.equation}}</p>
        <p>测试集结果图：<br><img :src="images" style="height: auto;max-height: 650px; width: 60%"/></p>
      </div>
    </div>
  </div>
</template>

<script>
  import {getForcecastHousePrice, postArea} from '../apis/api'
  export default {
    data () {
      return {
        form: {
          area: 0,
          price: 0
        },
        images: '',
        equation: ''
      }
    },
    methods: {
      getForecastPricePicture () {
        getForcecastHousePrice().then(res => {
          let data = JSON.parse(res.data)
          this.images = 'data:image/jpg;base64,' + data['img'].replace("b'", '').replace("'", '')
          this.equation = data['equation']
        }, res => {
          console.log(res)
        })
      },
      getForecastPrice () {
        postArea(JSON.stringify({ 'area': this.form.area })).then(res => {
          let data = JSON.parse(res.data)
          this.form.price = data['price']
        })
      }
    },
    mounted () {
      this.getForecastPricePicture()
    }
  }
</script>

<style scoped>

</style>
